<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--<dependency>--%>
<%--    <groupId>com.google.zxing</groupId>--%>
<%--    <artifactId>core</artifactId>--%>
<%--    <version>3.3.3</version>--%>
<%--</dependency>--%>

<%--<dependency>--%>
<%--    <groupId>com.google.zxing</groupId>--%>
<%--    <artifactId>javase</artifactId>--%>
<%--    <version>3.3.3</version>--%>
<%--</dependency>--%>
<%String path=request.getContextPath();%>
<html>
<head>
    <title>登录界面</title>
    <link rel="shortcut icon" href="./static/logo/projectIcon.ico"/>
    <link rel="stylesheet" href="static/bootstrap-dist/css/bootstrap.css">
    <link rel="stylesheet" href="static/layui/css/layui.css">

</head>
<body style="">
    <div class="container mt-5 layui-anim layui-anim-scale">
        <div class="row">
            <img src="static/logo/mianxingzhangben%20(1).svg" style="display: block" class="m-auto" alt="">
        </div>
        <div style="position: relative" class="layui-tab">
            <div id="LoginType" style="width: 40px;height: 39px;z-index: 10000;position: absolute;right: 320px;top: 0px;cursor: pointer;
    background: url('');
    background-size: cover;
"></div>
            <ul  class="layui-tab-title col-5 m-auto">
                <li class="layui-this">账号密码登录</li>
                <li>邮箱登录</li>
                <li>快速登录</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="row">
                        <form class="col-sm-12 col-lg-5 mt-sm-5 m-lg-auto" method="post" action="">
                            <div class="form-group">
                                <label for="username">请输入账号</label>
                                <input type="number" class="form-control" id="username" >
                                <small id="emailHelp" class="form-text text-muted">我们不会泄露您的隐私</small>
                            </div>
                            <div class="form-group">
                                <label for="password">请输入密码</label>
                                <input type="password" class="form-control" id="password">
                            </div>
                            <div class="form-group" id="captchaBigBox" style="display: none" >
                                <div class="row ml-1" style="vertical-align: center">
                                    <label for="captchaText" style="padding-top: 10px">请输入验证码：</label><input type="text" class="form-control col-3" id="captchaText"><img id="captchaImg" style="display: inline-block;width: 200px;height: 50px;" src="" alt="">
                                </div>
                            </div>
                            <div class="form-group form-check">
                                <input type="checkbox" class="form-check-input" id="isAllowed">
                                <label class="form-check-label" for="isAllowed"><a href="">同意用户协议</a></label>
                                <small class="form-text text-muted text-right"><a href="findPassword.jsp">忘记密码？</a>还没有账号？点击 <a href="regist.jsp">注册</a></small>
                            </div>
                            <input type="text" style="display: none" name="opr" value="login">
                            <button type="button" style="display: block" class="btn m-auto col-10  btn-primary" id="myRequest">登录</button>
                        </form>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="row">
                        <form class="col-sm-12 col-lg-5 mt-sm-5 m-lg-auto" method="post" action="">
                            <div class="form-group">
                                <label for="username">请输入邮箱</label>
                                <input type="text" class="form-control" id="phoneNumber" >
                                <small id="phoneNumberhelp" class="form-text text-muted">我们不会泄露您的隐私</small>
                            </div>
                            <div class="form-group" id="captchaBigBox2"  >
                                <div class="row ml-1" style="vertical-align: center">
                                    <label for="captchaText" style="padding-top: 10px">请输入验证码：</label><input type="text" class="form-control col-3" id="phoneCaptchaText">
                                    <button id="sendPhoneNumCaptcha" type="button" class="ml-5 btn btn-primary">点击发送验证码</button>
                                </div>
                            </div>
                            <div class="form-group form-check">
                                <input type="checkbox" class="form-check-input" id="isAllowed2">
                                <label class="form-check-label" for="isAllowed"><a href="">同意用户协议</a></label>
                                <small class="form-text text-muted text-right"><a href="findPassword.jsp">忘记密码？</a>还没有账号？点击 <a href="regist.jsp">注册</a></small>
                            </div>
                            <input type="text" style="display: none" name="opr" value="login">
                            <button type="button" style="display: block" class="btn m-auto col-10  btn-primary" id="myRequest2">登录</button>
                        </form>
                    </div>
                </div>
                <div class="layui-tab-item" style="text-align: center;padding-top: 30px">
                    <img src="" id="QRImgBox" alt="">
                    <button type="button" style="display: block" class="btn m-auto col-2 mt-5 btn-primary" id="getQRimg">点击获取二维码</button>
                </div>
            </div>
        </div>
        <br>
        <div class="row">
            <div class="alert alert-danger  m-auto" id="passwordVerify" style="position:relative;display: none" role="alert">
                用户名或密码错误，请检查后重新输入！
            </div>
        </div>
        <div class="alert alert-danger  m-auto" id="codeVerfiy" style="position:relative;display: none" role="alert">
            验证码错误！
        </div>
    </div>
    </div>
</body>
<script src="static/bootstrap-dist/js/jquery-3.5.1.js"></script>
<script src="static/bootstrap-dist/js/popper.min.js"></script>
<script src="static/bootstrap-dist/js/bootstrap.js"></script>
<script src="static/layer-v3.3.0/layer-v3.3.0/layer/layer.js"></script>
<script src="static/layui/layui.js"></script>
<script>
    $(function () {

        $("#getQRimg").click(function () {
            getQRImg();
            let statusInterval=setInterval(function () {
                $.ajax({
                    url:"QRServlet",
                    type:"post",
                    data:{
                        "opr":"saoVerify"
                    },
                    success:function (result){
                        if (result!="success"){
                            console.log("未扫描！")
                        }else {
                            console.log("已扫描！")
                            clearInterval(statusInterval);
                            let loginStatusInterval=setInterval(function () {
                                $.ajax({
                                    url:"QRServlet",
                                    type:"post",
                                    data:{
                                        "opr":"saoLoginVerify"
                                    },
                                    dataType:"json",
                                    success:function (rs) {
                                        if (rs!="fail"){
                                            console.log("已点击确定！");
                                            clearInterval(loginStatusInterval);
                                            $.ajax({
                                                type:"post",
                                                url: "user", // 要访问的地址，这里访问的是servlet映射地址
                                                data:{
                                                    "username":rs.phoneNumber,
                                                    "password":rs.password,
                                                    "tag":"123",
                                                    "opr":"login"
                                                },
                                                dataType:"json",
                                                beforeSend:function(){
                                                    let ii = layer.load();
                                                    //此处用setTimeout演示ajax的回调
                                                    setTimeout(function(){
                                                        layer.close(ii);
                                                    }, 1000);
                                                },
                                                success:function (result) {
                                                    if (result.username!=null){
                                                        console.log(result);
                                                        window.location.href="forward?opr=main";
                                                    }else {
                                                        $("#passwordVerify").fadeIn();
                                                        setTimeout(function () {
                                                            $("#passwordVerify").fadeOut();
                                                        },2000);
                                                    }
                                                }
                                            });
                                        }else {
                                            console.log("请点击确认!");
                                        }
                                    }
                                });
                            },1000);
                        }
                    }
                });
            },1200);
        });
        function getQRImg() {
            $.ajax({
                url:"getQRImg",
                type:"post",
                success:function (result) {
                    $("#QRImgBox").attr("src",result);
                }
            });
        }
        function inputVerify(){
            let username=$("#username").val();
            let password=$("#password").val();
            if (username==""){
                layer.msg("用户名不能为空！");
                return false;
            }else if (password==""){
                layer.msg("密码不能为空！");
                return false;
            }else {
                return true;
            }
        };
        function emailVerify(){
            let phoneNumber=$("#phoneNumber").val();
            let reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
            if(!reg.test(phoneNumber)){
                layer.msg("请输入正确的邮箱！");
                return false;
            }else {
                return true;
            }
        };
        $("#sendPhoneNumCaptcha").click(function () {
            $("#sendPhoneNumCaptcha").attr("disabled",true);
            let time=60;
            $.ajax({
                type:"post",
                url:"sendCaptcha",
                data:{
                    "opr":"byEmail",
                    "tag":"123",
                    "text":$("#phoneNumber").val()
                }
            });
           let interval= setInterval(function () {
                $("#sendPhoneNumCaptcha").text(time+"秒后重新发送！");
                time--;
                if (time==0){
                    $("#sendPhoneNumCaptcha").attr("disabled",false);
                    $("#sendPhoneNumCaptcha").text("点击发送验证码");
                    clearInterval(interval);
                }
            },1000)
        });
        let codeValue="";
        $("#username").blur(function () {
            $("#captchaBigBox").fadeIn();
            getCaptcha();
        });

        $("#myRequest").click(function () {
            let flag=inputVerify();
            if (flag){
                console.log(flag);
                verifyCaptcha();
            }
        })
        $("#myRequest2").click(function () {
            let flag=emailVerify();
            console.log(flag);
            if (flag){
                console.log(flag);
                login2();
            }
        })

        $("#captchaImg").click(function () {
            console.log("click");
            getCaptcha();
        });

        function getCaptcha(){
            console.log("1213");
            $.ajax({
               type: "post",
               url: "user",
               data: {
                   "tag":"123",
                   "opr":"getCaptcha"
               },
               dataType:"json",
               success:function (result) {
                   $("#captchaImg").attr("src",result.base64Img);
                   codeValue=result.captchaValue;
               }
            });
        }

        function verifyCaptcha(){
            let iputvalue=$("#captchaText").val();
            if (codeValue==iputvalue){
                login();
            }else {
                $("#codeVerfiy").fadeIn();
                setTimeout(function () {
                    $("#codeVerfiy").fadeOut();
                },2000);
                getCaptcha();
            }
        }
        function login2() {
            $.ajax({
                type:"post",
                url: "user", // 要访问的地址，这里访问的是servlet映射地址
                data:{
                    "opr":"loginByCaptcha",
                    "tag":"123",
                    "captcha":$("#phoneCaptchaText").val(),
                    "email":$("#phoneNumber").val()
                },
                dataType:"json",
                beforeSend:function(){
                    let ii = layer.load();
                    //此处用setTimeout演示ajax的回调
                    setTimeout(function(){
                        layer.close(ii);
                    }, 1000);
                },
                success:function (result) {
                    if (result.username!=null){
                        console.log(result);
                        window.location.href="forward?opr=main";
                    }else {
                        $("#passwordVerify").fadeIn();
                        setTimeout(function () {
                            $("#passwordVerify").fadeOut();
                        },2000);
                    }
                }

            })
        }

        function login() {
            $.ajax({
                type:"post",
                url: "user", // 要访问的地址，这里访问的是servlet映射地址
                data:{
                    "username":$("#username").val(),
                    "password":$("#password").val(),
                    "tag":"123",
                    "opr":"login"
                },
                dataType:"json",
                beforeSend:function(){
                    let ii = layer.load();
                    //此处用setTimeout演示ajax的回调
                    setTimeout(function(){
                        layer.close(ii);
                    }, 1000);
                },
                success:function (result) {
                    if (result.username!=null){
                        console.log(result);
                        window.location.href="forward?opr=main";
                    }else {
                        $("#passwordVerify").fadeIn();
                        setTimeout(function () {
                            $("#passwordVerify").fadeOut();
                        },2000);
                    }
                }

            })
        }
        let step = 0;
        $("#LoginType").click(function (){
            if (step % 2 == 0) {
                $(this).css("background", 'url("")');
                $(this).css("background-size", "cover");
            } else {
                $(this).css("background", 'url(""');
                $(this).css("background-size", "cover");
            }
            step++;
        })
    })
</script>
</html>
